<template>
  <div class="content" style="min-height: 100vh;">
    <HomeHead :type="1" />
    <div class="dotBox">
      <div class="goFullScreen flex_end" @click="goFullScreen">
          <img src="../../assets/i_full.png" />
          <div>全屏</div>
      </div>
      <div class="dotItem" v-for="(i, idx) in center_data" @click="dotItemClick(idx)" :style="{left: dots[idx].left + 'px', top: dots[idx].top + 'px', 'z-index': zIndexes[idx] || 1}">
        <div class="dotInner flex_column_left">
          <div class="_h3">
            {{i.device_name || ''}}
            <span :class="i.device_status == 'online' ? 'f_green' : 'f_red'">
              {{i.device_status == 'online' ? '在线' : '离线'}}
            </span>
          </div>
          <div class="_p"><span>{{i.data.indexOf('t') > -1 ? '水' : '电'}}量：</span>{{i.data || 0}}</div>
          <a href="javascript:;" class="clickBtn" :class="{red: i.cut_off == 1}" @click="open_act(i)">{{ i.cut_off == 1 ? '关闸' : '开闸' }}</a>
        </div>
        <img class="i_dot" :src="require(i.device_status == 'online' ? '@/assets/line_green.png' : '@/assets/line_red.png')" />
      </div>
    </div>
    <div class="normalBox" style="margin-top: 60px;">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">设备统计</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="dataBox flex_between">
        <div class="item">
          <div @click="deviceShowAct(0)">
            <img src="../../assets/shebeiIcon_01.png"/>
            <div class="_h3">{{device_st.total_devices.number || 0}}</div>
            <div class="_p">设备数量</div>
          </div>
          <div class="dotItem" v-if="device_show[0] && device_st.total_devices.data && device_st.total_devices.data.length > 0">
            <div class="dotInner noBtn flex_column_left">
              <div class="flex_center fl_wrap">
                <div class="_h3" v-for="i in device_st.total_devices.data">{{i}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div @click="deviceShowAct(1)">
            <img src="../../assets/shebeiIcon_02.png"/>
            <div class="_h3">{{device_st.online_devices.number || 0}}</div>
            <div class="_p">在线</div>
          </div>
          <div class="dotItem" v-if="device_show[1] && device_st.online_devices.data && device_st.online_devices.data.length > 0">
            <div class="dotInner noBtn flex_column_left">
              <div class="flex_center fl_wrap">
                <div class="_h3" v-for="i in device_st.online_devices.data">{{i}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div @click="deviceShowAct(2)">
            <img src="../../assets/shebeiIcon_03.png"/>
            <div class="_h3">{{device_st.offline_devices.number || 0}}</div>
            <div class="_p">离线</div>
          </div>
          <div class="dotItem" v-if="device_show[2] && device_st.offline_devices.data && device_st.offline_devices.data.length > 0">
            <div class="dotInner noBtn flex_column_left">
              <div class="flex_center fl_wrap">
                <div class="_h3" v-for="i in device_st.offline_devices.data">{{i}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div @click="deviceShowAct(3)">
            <img src="../../assets/shebeiIcon_04.png"/>
            <div class="_h3">{{device_st.setting_devices.number || 0}}</div>
            <div class="_p">配置中</div>
          </div>
          <div class="dotItem" style="left: auto;right: -30px;" v-if="device_show[3] && device_st.setting_devices.data && device_st.setting_devices.data.length > 0">
            <div class="dotInner noBtn flex_column_left">
              <div class="flex_center fl_wrap">
                <div class="_h3" v-for="i in device_st.setting_devices.data">{{i}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">上下线记录</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="recordList">
        <div class="col listTit flex_start">
          <div class="item flex_center flex_1">设备名称</div>
          <div class="item flex_center flex_1">时间</div>
          <div class="item flex_center width_14">状态</div>
        </div>
        <div class="col flex_start" v-for="(i, idx) in device_status_change_log">
          <div class="item flex_center flex_1">{{i.device_name}}</div>
          <div class="item flex_center flex_1">{{i.time}}</div>
          <div class="item flex_center width_14"><span :class="i.status == 'online' ? 'f_green' : 'f_red'">{{i.status == 'online' ? '上线' : '下线'}}</span></div>
        </div>
      </div>
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">报警统计</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="flex_start">
        <div style="width:60%; height: 200px;">
          <Pine :info="alarm_st" />
        </div>
        <div class="chartInfo">
          <div class="item">
            <div class="_p flex_start"><i class="i_dot" style="background:#FF4D40;"></i><span>报警设备</span> </div>
            <div class="_h3" style="color:#FF4D40;">{{alarm_st.is_alarm || 0}}</div>
          </div>
          <div class="item">
            <div class="_p flex_start"><i class="i_dot" style="background:#128DEB;"></i><span>正常设备</span> </div>
            <div class="_h3">{{alarm_st.no_alarm || 0}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">报警记录</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <div class="recordList">
        <div class="col listTit flex_start">
          <div class="item flex_center flex_1">设备名称</div>
          <div class="item flex_center flex_1">时间</div>
          <div class="item flex_center width_20">报警原因</div>
        </div>
        <div class="col flex_start" v-for="i in alarm_log">
          <div class="item flex_center flex_1">{{i.device_name}}</div>
          <div class="item flex_center flex_1">{{i.time}}</div>
          <div class="item flex_center width_20">
            {{i.message}}<br />
            {{i.number}}（{{ i.xnumber }}）
          </div>
        </div>
      </div>
    </div>

    <van-overlay :show="overlay_show" @click="overlay_click" />
  </div>
</template>
<script>
import Pine from '@/components/Pine'
import HomeHead from '@/components/HomeHead';
import { Dialog } from 'vant';

export default {
  components: { Pine, HomeHead },
  data () {
    return {
      device_st: {total_devices:{}, online_devices:{}, offline_devices:{}, setting_devices:{}},
      device_status_change_log: [],
      center_data: [{},{},{},{},{}],
      alarm_st: {},
      alarm_log: [],
      overlay_show: false,
      device_show: [false, false, false, false],
      dots: {
        15:{"left":7,"top":86}, // 0
        14:{"left":170,"top":30}, // 1
        12:{"left":380,"top":58}, // 2
        0:{"left":38,"top":210}, // 3
        7:{"left":202,"top":155}, // 4 
        10:{"left":365,"top":181}, // 5
        19:{"left":530,"top":200}, // 6
        4:{"left":637,"top":220}, // 7
        8:{"left":0,"top":312}, // 8
        9:{"left":150,"top":273}, // 9 
        2:{"left":320,"top":274}, // 10
        11:{"left":510,"top":293}, // 11
        5:{"left":621,"top":327}, // 12
        13:{"left":10,"top":435}, // 13
        1:{"left":160,"top":377}, // 14
        18:{"left":331,"top":375}, // 15
        16:{"left":544,"top":400}, // 16
        17:{"left":233,"top":487}, // 17
        3:{"left":445,"top":500}, // 18
        6:{"left":628,"top":520} // 19
      },
      zIndex: 1,
      zIndexes: {9999: 1},
      clock: null,
    };
  },
  created() {
    let query = this.$route.query
    if (query.token) {
      localStorage.setItem('token', decodeURIComponent(query.token))
    }
    Object.keys(this.dots).map(i => {
      this.dots[i].left = this.dots[i].left / 820 * 320
      this.dots[i].top = this.dots[i].top / 640 * 280
    })

    this.get_device_st(() => {
      this.get_device_status_change_log()
      this.get_center_data()
      this.get_alarm_st()
      this.get_alarm_log()

      if (this.clock) clearInterval(this.clock)
      this.clock = setInterval(() => {
        this.get_device_st()
        this.get_device_status_change_log()
        this.get_center_data()
        this.get_alarm_st()
        this.get_alarm_log()
      }, 3000)
    })
  },
  methods: {
    dotItemClick(idx) {
      this.zIndex++
      this.zIndexes[idx] = this.zIndex
    },
    goFullScreen() {
      this.$router.push({ path: '/fullscreen' })
    },
    deviceShowAct (idx) {
      let fileds = ['total_devices', 'online_devices', 'offline_devices', 'setting_devices']
      if (this.device_st[fileds[idx]].data && this.device_st[fileds[idx]].data.length > 0) {
        this.device_show[idx] = true
        this.overlay_show = true
      }
    },
    overlay_click() {
      this.overlay_show = false
      this.device_show = [false, false, false, false]
    },
    // 设备统计
    get_device_st(cb) {
      cb = cb || function() {}
      this.sendReq('/api/datav/home/device_st', 'get', {}, r => {
        this.device_st = r
        cb()
      })
    },
    // 上下线记录
    get_device_status_change_log() {
      this.sendReq('/api/datav/home/device_status_change_log', 'get', {}, r => {
        this.device_status_change_log = r
      })
    },
    // 中间图案的设备
    get_center_data() {
      this.sendReq('/api/datav/home/center_data', 'get', {}, r => {
        this.center_data = r.slice(0, 20)
      })
    },
    // 报警统计
    get_alarm_st() {
      this.sendReq('/api/datav/home/alarm_st', 'get', {}, r => {
        this.alarm_st = r
      })
    },
    // 报警记录
    get_alarm_log() {
      this.sendReq('/api/datav/home/alarm_log', 'get', {}, r => {
        this.alarm_log = r
      })
    },
    open_act(row) {
      Dialog.confirm({
        title: '',
        message: row.cut_off == 1 ? `${row.device_name}<br>确定要关闸吗？` : `${row.device_name}<br>确定要开闸吗？`,
      })
      .then(() => {
        row.cut_off = row.cut_off == 1 ? 0 : 1
        this.sendReq('/api/device/set_cut_off_status', 'post', {device_id: row.device_id}, r => {
        })
      })
      .catch(() => {
        // on cancel
      });
    },
  }
};
</script>

<style lang="less" scoped>
.content {
  background: url(../../assets/homeBg.jpg) no-repeat center top #13244C;
  background-size: 100% auto;
  box-sizing: border-box; 
  padding-bottom: 4vw;
  overflow-x: hidden;
}
.chartInfo{
  .item{
    padding:5px 0;
  }
  .i_dot{
    display:block;
    width:9px;
    height:9px;
    border-radius:50%;
    margin-right:5px;
  }
  ._p{
    font-size:12px;
    color:#fff;
  }
  ._h3{
    font-size:16px;
    font-weight:600;
    padding:6px 0 6px 14px;
    color:#fff;
  }
}
.topTab{
  padding:3vw 0;
  .col{
    width:26.8vw;
    height:8vw;
    background: url(../../assets/checkBg.png) no-repeat center center;
    background-size:100% auto; 
    color:#fff;
    font-size:16px;
    margin:0 3vw;
  }
  .cur{
    background: url(../../assets/checkedBg.png) no-repeat center center;
    background-size:100% auto; 
  }
}
.normalBox{
  width:92vw;
  margin:4vw auto 0 auto;
  background: rgba(14, 34, 68, 0.5);
  box-shadow: -4px -4px 12px 0 #1f8dcd40 inset, 4px 4px 12px 0 #1f8dcd33 inset;
  position: relative;
  padding:4vw;
  box-sizing: border-box;
  .title{
    color:#128DEB;
    font-size:18px;
    min-width:40vw;
    padding:1vw 2vw;
    background: linear-gradient(90deg, #12376C 0.06%, #12376c00 100.04%);
    .inner{
      padding:0 3vw;
    }
  }
  .tit_bott{
    display: block;
    width:100%;
    margin:0.5vw auto;
  }
  .i_line{
    display: block;
    position: absolute;
    width:42vw;
    height:3px;
    background: url(../../assets/guang_line.png) no-repeat center center;
    background-size:100% auto; 
    left:50%;
    margin-left:-21vw;
    top:0;
  }
  .i_jiao{
    display: block;
    position: absolute;
    width:1.6vw;
    height:1.6vw;
  }
  .i_j_t_l{
    background: url(../../assets/i_j_t_l.png) no-repeat center center;
    background-size:100% auto; 
    top:0;
    left:0;
  }
  .i_j_t_r{
    background: url(../../assets/i_j_t_r.png) no-repeat center center;
    background-size:100% auto; 
    top:0;
    right:0;
  }
  .i_j_b_l{
    background: url(../../assets/i_j_b_l.png) no-repeat center center;
    background-size:100% auto; 
    bottom:0;
    left:0;
  }
  .i_j_b_r{
    background: url(../../assets/i_j_b_r.png) no-repeat center center;
    background-size:100% auto; 
    bottom:0;
    right:0;
  }
}
.dataBox{
  padding:4vw 0 0 0;
  .item{
    position: relative;
    text-align: center;
    color:#fff;
    img{
      display: block;
      width:10.6vw;
      margin:0 auto;
    }
    ._h3{
      font-weight:bold;
      font-size:15px;
      padding:1vw 0;
    }
    ._p{
      font-size:12px;
      font-weight:normal;
    }
    .dotItem {
      display: block;
      bottom: 70px;
      left: -20px;
      z-index: 199;
      .dotInner {
        padding: 0 3px 5px 3px;
        height: auto;
        background-size: 100% 100%;
      }
      ._h3 {
        padding: 3px;
        font-weight: normal;
        font-size: 12px;
      }
    }
  }
}
.recordList{
  margin-top:2vw;
  .col{
    background: rgba(15, 41, 75, 0.9);
    text-align: center;
    color:rgba(255, 255, 255, 0.8);
    font-size:12px;
    padding:3vw 0;
    box-sizing: border-box;
    .item{
      padding:0 3vw;
    }
    .width_14{
      width:14vw;
    }
    .width_20{
      width:27vw;
    }
  }
  .listTit{
    font-size:14px;
    font-weight:bold;
    color:#fff;
  }
  .col:nth-child(odd){
    background: rgba(15, 41, 75, 0);
  }
}
.dotBox{
    width:100%;
    // height:50vh;
    height: 280px;
    position: relative;
    // overflow-x: hidden;
  }
  .dotItem{
    width:140px;
    position: absolute;
    .dotInner{
      width:130px;
      height:80px;
      background: url(../../assets/dotbox_big.png) no-repeat center center;
      background-size:130px 80px;
      padding:0 5px 3px 8px;
      box-sizing: border-box;
      font-size:12px;
      color:#fff;
      ._h3{
        font-size:12px;
        color:#128DEB;
      }
      ._p{
        span{color:rgba(255,255,255,0.6)}
        padding:0 0 3px;
      }
      .clickBtn{
        display: block;
        width: 50px;
        height: 18px;
        font-size:11px;
        color:#FFFFFF;
        font-weight:600;
        text-align: center;
        line-height: 18px;
        background: #128DEB;
        &.red {
          background: #FF4D40;
        }
      }
    }
    .i_dot{
      display: block;
      width:24px;
      height:40px;
      margin:-15px 0 0 35px;
    }
  }
  .goFullScreen{
    width:100%;
    font-size:14px;
    color:#128DEB;
    padding-right:20px;
    position: absolute;
    right:0;
    top:0;
    img{
      width:12px;
      margin-right:5px;
    }
  }
</style>
